<template>
  <!-- 点击预览效果 -->
  <div class="container">
    <div class="box" v-for="(url, index) in imageArray" :key="index">
      <el-image class="box-image" :src="url" :preview-src-list="imageArray">
      </el-image>
    </div>
  </div>

  <!-- 滑动预览效果 -->
  <!-- <div class="container">
    <el-popover
      placement="right"
      title
      trigger="hover"
      v-for="(item, index) in imageArray"
      :key="index"
      style="padding-right: 5px"
    >
      <el-image
        slot="reference"
        :src="item"
        style="height: 40px; width: 40px"
      />
      <img :src="item" style="height: 400px; width: 400px" />
    </el-popover>
  </div> -->
</template>

<script>
export default {
  props: ["imgUrls", "imgDicUrls"],

  computed: {
    imageArray() {
      if (this.imgUrls) {
        let arr = [this.imgUrls.url]
        return arr;
      } else {
        if (this.imgDicUrls) {
          let data = this.imgDicUrls;

          if (typeof data == 'string') {
            data = JSON.parse(data)
          }

          if (data instanceof Object) {
            data = Array.from(data);
          }

          let arr = data.map((item) => {
            return item.url;
          });
          return arr;
        }
      }
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
}
.box {
  display: flex;
}

.box .box-image {
  width: 40px;
  height: 40px;
  padding-right: 5px;
}
</style>